<template>
	<view class="wrap s-flex-c-s-s">
		<view class="top">
			<view class="item" :style="{backgroundImage:`url(${img[level-1].bg})`}">
				<view class="top s-flex-r-b-s">
					<view class="l s-flex-r-s-s">
						<!-- <image class="img" :src="`/static/images/memberCard/${level}.png`" mode=""></image> -->
						<view class="r flex1">
							<!-- <view class="name">
								{{details.name}}
							</view>
							<view class="btm s-flex-r-b-s">
								<view class="more more1">
									探索会员福利 >
								</view>
								<view class="more">
									解锁更多会员特权 >
								</view>
							</view> -->

						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="content flex1">
			<view class="row s-flex-r-s-c" v-for="(item,index) in details.rightdata" :key="index">
				<image class="icon" :src="item.image" mode=""></image>
				<view class="name">
					{{item.intro}}
				</view>
			</view>
			<template v-if="!vipLevel||level>vipLevel">
				<view class="btm-btn s-flex-c-c-c" @click="goOpen">
					<text>去开通</text>
				</view>
			</template>
			<template v-else>
				<template v-if="level==1">
					<view class="btm-btn s-flex-c-c-c" @click="goGet" v-if="is_receive==0&&is_virtual_receive==0">
						<text>去领取</text>
					</view>
				</template>
				<template v-if="level>1">
					<view class="btm-btn s-flex-c-c-c" @click="goGet" v-if="is_receive==0||is_virtual_receive==0">
						<text>去领取</text>
					</view>
					<view class="btm-btn s-flex-c-c-c" v-else>
						<text>已领取</text>
					</view>
				</template>
			</template>

		</view>
		<!-- 支付弹框 -->
		<u-popup v-model="show" mode="bottom">
			<view class="pay-box">

				<!-- 微信支付 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="u-flex u-row-between pay-item" @click="pay('wechat')">
					<view class="u-flex">
						<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_wx_pay.png'" mode=""></image>
						<text>微信支付</text>
					</view>
				</view>

				<!-- #endif -->
				<!-- 支付宝支付 -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="u-flex u-row-between pay-item" @click="pay('alipay')">
					<view class="u-flex">
						<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_ali_pay.png'" mode=""></image>
						<text>支付宝支付</text>
					</view>
					<u-radio shape="circle" name="alipay"></u-radio>
				</view>

				<!-- #endif -->
				<!-- 余额支付 -->
				<view class="u-flex u-row-between pay-item" @click="pay('balance')">
					<view class="u-flex">
						<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_wallet_pay.png'" mode=""></image>
						<text>余额支付</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择礼品弹框 -->
		<!-- 6.用户购买398会员时能选择获得核销券或者实体商品，购买1980、6980会员时可获得核销券和宠物一只 -->
		<u-popup v-model="show2" mode="bottom" border-radius="10rpx" :mask-close-able="false">
			<view class="gift-box">
				<view class="title">
					<text>选择礼品</text>
					<u-icon @click="close" class="close" name="close" color="#999999" size="24"></u-icon>
				</view>
				<u-tabs v-if="show2" :list="tabList" :is-scroll="false" :current="current" @change="change"
					bar-height="4" bar-width="332" active-color="#EB5F24"></u-tabs>
				<scroll-view class="list1" v-if="currentId==0">
					<view class="item2 s-flex-r-s-c" @click="handleSelect1(item.id)" v-for="(item, index) in list1"
						:key="index">
						<view class="circle circle-l"></view>
						<view class="circle circle-r"></view>
						<view class="left">
							<text class="symbol">￥</text>
							<text class="money">{{item.price}}</text>
						</view>
						<u-line color="#F6DCD3" length="92rpx" direction="col"></u-line>
						<view class="right">
							<view class="name">{{item.title}}</view>
							<view class="time">有效期：{{item.expire_time}}</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="list1" scroll-y v-if="currentId==2">
					<view class="item2 s-flex-r-s-c" @click="handleSelect1(item.id)" v-for="(item, index) in list3"
						:key="index">
						<view class="circle circle-l"></view>
						<view class="circle circle-r"></view>
						<view class="left">
							<text class="symbol">￥</text>
							<text class="money">{{item.price}}</text>
						</view>
						<u-line color="#F6DCD3" length="92rpx" direction="col"></u-line>
						<view class="right">
							<view class="name">{{item.title}}</view>
							<view class="time">有效期：{{item.expire_time}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="" v-if="currentId==1">
					<u-radio-group v-model="radioValue" @change="radioGroupChange">
						<view class="list2 s-flex-r-b-c u-flex-wrap">
							<!-- 地址栏 -->
							<view class="head_box" @tap="go('/pages/user/address/list', { from: 'memer' })">
								<view class="add-address-box u-flex u-flex-1" v-if="!addressId">
									<view class="box-bg u-p-30 u-flex-1 u-flex u-row-between">
										<text class="select-notice">请选择收货地址</text>
										<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
									</view>
								</view>
								<view class="add-address-box u-p-30" v-else>
									<view class="top1 u-flex">
										<text class="name">{{ addressData.consignee }}</text>
										<text class="phone">{{ addressData.phone }}</text>
										<text class="tag" v-show="addressData.is_default == 1">默认</text>
									</view>
									<view class="detail u-flex u-row-between">
										<view class="address">
											{{ addressData.province_name }}{{ addressData.city_name
							        }}{{ addressData.area_name }}{{ addressData.address }}
										</view>
										<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
									</view>
								</view>
							</view>
							<!-- 商品 -->
							<view class="list2-item" @click="handleSelect2(item.id)" v-for="(item, index) in list2"
								:key="index">
								<view class="img-box s-flex-c-s-c">
									<u-image class="img" width="328rpx" height="328rpx" :src="item.image"
										alt=""></u-image>
									<u-radio class="my-radio" @change="radioChange($event,item)" size="32rpx"
										label-size="2rpx" active-color="#EB5F24" :name="item.id"></u-radio>
								</view>
								<view class="list2-title">{{item.title}}</view>
								<view class="sub-t">{{item.subtitle}}</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<template v-if="level==1">
					<view class="btn s-flex-c-c-c" @click="confirmFn" v-if="is_receive==0&&is_virtual_receive==0">
						<text>确定</text>
					</view>
					<view class="btn s-flex-c-c-c" v-else>
						<text>已领取</text>
					</view>
				</template>
				<template v-if="level>1">
					<view class="btn s-flex-c-c-c" @click="confirmFn"
						v-if="(currentId==0&&is_virtual_receive==0)||(currentId==1&&is_receive==0)">
						<text>确定</text>
					</view>
					<view class="btn s-flex-c-c-c" v-else>
						<text>已领取</text>
					</view>
				</template>
			</view>
		</u-popup>
		<u-popup v-model="show3" mode="bottom" border-radius="10rpx" :mask-close-able="false">
			<view class="gift-box">
				<view class="title">
					<text>选择地址</text>
					<u-icon @click="show3=false" class="close" name="close" color="#999999" size="24"></u-icon>
				</view>
				<u-tabs v-if="show3" :list="tabList" :is-scroll="false" :current="current" @change="change"
					bar-height="4" bar-width="332" active-color="#EB5F24"></u-tabs>
				<scroll-view class="list1" v-if="currentId==0">
					<view class="item2 s-flex-r-s-c" @click="handleSelect1(item.id)" v-for="(item, index) in list1"
						:key="index">
						<view class="circle circle-l"></view>
						<view class="circle circle-r"></view>
						<view class="left">
							<text class="symbol">￥</text>
							<text class="money">{{item.price}}</text>
						</view>
						<u-line color="#F6DCD3" length="92rpx" direction="col"></u-line>
						<view class="right">
							<view class="name">{{item.title}}</view>
							<view class="time">有效期：{{item.expire_time}}</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="list1" scroll-y v-if="currentId==2">
					<view class="item2 s-flex-r-s-c" @click="handleSelect1(item.id)" v-for="(item, index) in list3"
						:key="index">
						<view class="circle circle-l"></view>
						<view class="circle circle-r"></view>
						<view class="left">
							<text class="symbol">￥</text>
							<text class="money">{{item.price}}</text>
						</view>
						<u-line color="#F6DCD3" length="92rpx" direction="col"></u-line>
						<view class="right">
							<view class="name">{{item.title}}</view>
							<view class="time">有效期：{{item.expire_time}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="" v-if="currentId==1">
					<u-radio-group v-model="radioValue" @change="radioGroupChange">
						<view class="list2 s-flex-r-b-c u-flex-wrap">
							<!-- 地址栏 -->
							<view class="head_box" @tap="go('/pages/user/address/list', { from: 'memer' })">
								<view class="add-address-box u-flex u-flex-1" v-if="!addressId">
									<view class="box-bg u-p-30 u-flex-1 u-flex u-row-between">
										<text class="select-notice">请选择收货地址</text>
										<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
									</view>
								</view>
								<view class="add-address-box u-p-30" v-else>
									<view class="top1 u-flex">
										<text class="name">{{ addressData.consignee }}</text>
										<text class="phone">{{ addressData.phone }}</text>
										<text class="tag" v-show="addressData.is_default == 1">默认</text>
									</view>
									<view class="detail u-flex u-row-between">
										<view class="address">
											{{ addressData.province_name }}{{ addressData.city_name
							        }}{{ addressData.area_name }}{{ addressData.address }}
										</view>
										<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
									</view>
								</view>
							</view>
							<!-- 商品 -->
							<view class="list2-item" @click="handleSelect2(item.id)" v-for="(item, index) in list2"
								:key="index">
								<view class="img-box s-flex-c-s-c">
									<u-image class="img" width="328rpx" height="328rpx" :src="item.image"
										alt=""></u-image>
									<u-radio class="my-radio" @change="radioChange($event,item)" size="32rpx"
										label-size="2rpx" active-color="#EB5F24" :name="item.id"></u-radio>
								</view>
								<view class="list2-title">{{item.title}}</view>
								<view class="sub-t">{{item.subtitle}}</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<!-- 地址栏 -->
				<view class="btn s-flex-c-c-c" @click="confirmAddress">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: [{
						bg: 'https://guanchong.bigchun.com/uploads/20240815/f0f8324d0f3e28a7006140474e58d7a8.png',
						vip: 'https://guanchong.bigchun.com/uploads/20240815/afb29f97b3925c0c07da3bae4df42c73.png',
					},
					{
						bg: 'https://guanchong.bigchun.com/uploads/20240815/8cfa4c70c28b47cffcf5a215a4db948e.png',
						vip: 'https://guanchong.bigchun.com/uploads/20240815/ad265698d8c535a17316a8e940896aef.png',
					},
					{
						bg: 'https://guanchong.bigchun.com/uploads/20240815/503eb83ffb9ccbf71c34f18ea5b8a217.png',
						vip: 'https://guanchong.bigchun.com/uploads/20240815/c3de4622ece78c9bc1ccd449786d2e1d.png',
					},
				],
				addressData: {}, //收货地址
				addressId: 0, //收货地址ID
				chooseAddress: '点击选择地理位置', //定位地址
				tabList: [{
						name: '核销券',
						id: 0,
					},
					{
						name: '核销券2',
						id: 2,
					},
					{
						name: '商品',
						id: 1,
					},
				],
				list1: [],
				list2: [],
				list3: [],
				radioValue: '',
				currentId: 0,
				current: 0,
				currentItem: '',
				show: false,
				show2: false,
				show3: false,
				level: '1',
				is_receive: '',
				is_virtual_receive: '',
				vipLevel: '',
				details: {},
			};
		},
		onLoad(e) {
			if (e.level) {
				this.level = e.level
				this.vipLevel = e.vipLevel
				this.getData()
				this.getData2()
				this.getList()
				if (e.level == 1) {
					this.tabList = [{
							name: '核销券',
							id: 0,
						},
						{
							name: '核销券2',
							id: 2,
						},
						{
							name: '商品',
							id: 1,
						},
					]
				} else {
					this.tabList = [{
							name: '核销券',
							id: 0,
						},
						{
							name: '商品',
							id: 1,
						},
					]
				}
			}
			// 监听地址
			uni.$on("SELECT_ADDRESS", (res) => {
				if (res.addressData) {
					this.addressData = JSON.parse(res.addressData);
					this.addressId = this.addressData.id;
				} else {
					this.addressId = 0;
				}
				res.addressData && uni.$off("SELECT_ADDRESS");
			});
		},
		onReady() {
			if (this.$refs.uForm) {
				this.$refs.uForm.setRules(this.rules);
			}
		},
		methods: {
			getList() {
				this.$http('vip.index', {}).then(res => {
					this.vipLevel = res.data?.vipInfo?.level
				});
			},
			confirmFn() {
				let goods_id = ''
				if (this.level == 1 && this.currentId == 0) {
					goods_id = this.list1.map(i => i.id).join(',')
				}
				if (this.level == 1 && this.currentId == 2) {
					goods_id = this.list3.map(i => i.id).join(',')
				}
				if (this.level == 1 && this.currentId == 1) {
					goods_id = this.radioValue
					if (!goods_id) {
						return uni.showToast({
							title: "请选择商品",
							icon: "none"
						})
					}
					if (!this.addressId) {
						return uni.showToast({
							title: "请选择收货地址",
							icon: "none"
						})
					}
				}
				if (this.level > 1) {
					goods_id = this.list1.map(i => i.id).join(',') + ',' + this.radioValue
					if (!this.addressId) {
						this.current = 1;
						this.currentId = this.tabList[1].id;
						return uni.showToast({
							title: "请选择收货地址",
							icon: "none"
						})
					}
				}
				this.subAddress(goods_id)
			},
			subAddress(goods_id) {
				const params = {
					level: this.level,
					goods_id
				}
				if ((this.level == 1 && this.currentId == 1) || this.level > 1) {
					params.address_id = this.addressId
				}
				this.$http('order.receiveGoods', params).then(res => {
					if (res.data) {
						uni.showToast({
							title: "领取成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				});
			},
			handleSelect1(id) {
				if (this.currentItem == id) {
					this.currentItem = ''
				} else {
					this.currentItem = id
				}
			},
			handleSelect2(id) {
				this.radioValue = id
			},
			radioChange(e, item) {},
			change(index) {
				this.current = index;
				this.currentId = this.tabList[index].id;
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {},
			getData() {
				this.$http('vip.vipDetails', {
					level: this.level
				}).then(res => {
					if (res.data) {
						this.details = res.data
						this.is_receive = res.data.is_receive
						this.is_virtual_receive = res.data.is_virtual_receive
					}
				});
			},
			getData2() {
				// shangpin
				this.$http('vip.getGoods', {
					level: this.level,
					type: 'normal'
				}).then(res => {
					if (res.data) {
						this.list2 = res.data
						if (this.level > 1) {
							this.radioValue = res.data[0].id
						}
					}
				});
				// 核销券
				this.$http('vip.getGoods', {
					level: this.level,
					type: 'virtual'
				}).then(res => {
					if (res.data) {
						this.list1 = res.data
					}
				});
				// 核销券
				this.$http('vip.getGoods', {
					level: this.level,
					type: 'virtual',
					virtual: 2
				}).then(res => {
					if (res.data) {
						this.list3 = res.data
					}
				});
			},
			goGet() {
				this.show = false;
				this.show2 = true;
			},
			confirmAddress() {
				if (!this.addressId) {
					this.current = 1;
					this.currentId = this.tabList[1].id;
					return uni.showToast({
						title: "请选择收货地址",
						icon: "none"
					})
				}
				this.show3 = false;
				this.show = true;
			},
			goOpen() {
				if (this.level > 1) {
					this.show3 = true
				} else {
					this.show = true;
				}
			},
			close() {
				this.show = false;
				this.show2 = false
				this.getData()
				this.getList()
			},
			async pay(paytype) {
				this.show = false;
				let params = {
					level: this.level,
					days: 9999,
					paytype,
					method: 'mp',
				}
				if (this.level > 1) {
					params.address_id = this.addressId
				}
				if (paytype == 'wechat') {
					// 有openid传openid 没有调登录传code后端获取openid
					if (uni.getStorageSync('openid')) {
						params.openid = uni.getStorageSync('openid');
					} else {
						const loginResult = await uni.login();
						params.code = loginResult[1].code
					}
					params.method = "miniapp"
					uni.showLoading({
						title: '支付中',
						mask: true
					})
					this.$http('vip.submit', params).then(res => {
						if (res.code == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								...res.data,
								success: res => {
									uni.showToast({
										title: '支付成功',
										icon: "none"
									})
									setTimeout(() => {
										uni.hideLoading()
										if (this.level == 1) {
											this.show2 = true
										}
										this.show = false
										this.getData()
										this.getList()
									}, 500)
								},
								fail: err => {
									uni.hideLoading()
									// err.errMsg !== "requestPayment:fail cancel" && that.payResult('fail')
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							uni.hideLoading()
						}
					});
				} else {
					uni.showLoading({
						title: '支付中',
						mask: true
					})
					this.$http('vip.submit', params).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							uni.hideLoading()
							// uni.navigateBack()
							this.show = false
							if (this.level == 1) {
								this.show2 = true
							}
							this.getData()
							this.getList()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}).catch(err => {
						uni.hideLoading()
					});

				}
			}
		}
	}
</script>

<style lang="scss">
	// 收货地址栏
	.head_box {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.add-address-box {
		min-height: 100rpx;
		background-size: 100% auto;
		background-position: bottom center;

		.select-notice {
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 40rpx;
		}

		.name,
		.phone {
			font-size: 30rpx;
			font-weight: 500;
		}

		.phone {
			margin: 0 20rpx;
		}

		.tag {
			background: rgba(233, 191, 113, 0.2);
			border-radius: 6rpx;
			padding: 0 16rpx;
			line-height: 38rpx;
			color: #a8700d;
			font-size: 22rpx;
		}

		.detail {
			.address {
				margin-top: 25rpx;
				width: 543rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 40rpx;
			}
		}
	}

	.my3 {

		/deep/.uni-scroll-view,
		/deep/.u-drawer-content {
			overflow: visible !important;
		}
	}

	.address-box {
		position: relative;
		padding-top: 158rpx;
		padding-bottom: 30rpx;

		.close {
			position: absolute;
			right: 32rpx;
			top: 44rpx;
		}

		.red-tit {
			font-size: 36rpx;
			color: #E72A1F;
			line-height: 42rpx;
			font-weight: bold;
		}

		.redEnvelope {
			width: 364rpx;
			height: 348rpx;
			position: absolute;
			left: 194rpx;
			top: -190rpx;
		}

		.quan-box {
			margin-left: 118rpx;
			width: 448rpx;
			height: 232rpx;
			position: relative;

			.quan {
				width: 448rpx;
				height: 232rpx;
			}

			.money-box {
				position: absolute;
				top: 24rpx;
				left: 190rpx;
				background: none;

				.symbol {
					font-weight: bold;
					font-size: 32rpx;
					color: #EB5C20;
				}

				.money {
					font-weight: 600;
					font-size: 92rpx;
					color: #EB5C20;
					line-height: 108rpx;
				}
			}
		}

		.form {
			padding: 0 32rpx;

			.address-t {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				line-height: 100rpx;
			}

			.inp {
				background: #F3F3F3;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0 40rpx !important;
			}
		}
	}

	.gift-box {
		overflow: hidden;
		padding-bottom: 30rpx;

		.title {
			height: 108rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 108rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			position: relative;

			.close {
				position: absolute;
				right: 32rpx;
				top: 4rpx;
			}
		}

		.list1 {
			max-height: 852rpx;
			overflow-y: auto;
			padding: 30rpx 32rpx;
			box-sizing: border-box;

			.item2 {
				// overflow: hidden;
				width: 686rpx;
				height: 152rpx;
				background: #FAE8E6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				position: relative;
				margin-bottom: 32rpx;

				.circle {
					width: 26rpx;
					height: 26rpx;
					background: #ffffff;
					border-radius: 13rpx;
					position: absolute;
					top: 64rpx;
				}

				.circle-l {
					left: -13rpx;
				}

				.circle-r {
					right: -13rpx;
				}

				.left {
					width: 210rpx;
					padding-left: 20rpx;

					.symbol {
						font-weight: bold;
						font-size: 36rpx;
						color: #EB5C20;
					}

					.money {
						font-weight: 600;
						font-size: 68rpx;
						color: #EB5C20;
						line-height: 89rpx;
						text-align: left;
						white-space: nowrap;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					height: 152rpx;
					padding-left: 30rpx;
					width: 470rpx;

					.name {
						font-weight: 600;
						font-size: 32rpx;
						color: #EB5C20;
						line-height: 58rpx;
					}

					.time {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 44rpx;
						text-align: left;
					}
				}
			}

			.active {
				border: 1rpx solid #EB5C20;
			}
		}

		.list2 {
			width: 750rpx;
			padding: 30rpx 32rpx;
			max-height: 852rpx;
			overflow-y: scroll;

			.list2-item {
				width: 328rpx;
				margin-bottom: 40rpx;

				.list2-title {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.sub-t {
					font-size: 24rpx;
					color: #999999;
					line-height: 44rpx;
				}


				.img-box {
					position: relative;
					width: 328rpx;
					height: 328rpx;
					background: #F4F4F4;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.my-radio {
						position: absolute;
						top: 20rpx;
						right: -10rpx;
						z-index: 999;
					}

					.img {
						width: 328rpx;
						height: 328rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						z-index: 0;
					}
				}
			}
		}

	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #FF9A38 0%, #EB5C20 100%), #D9D9D9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 32rpx;
		position: relative;
		z-index: 1000;
	}

	.wrap {
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;

		.content {
			padding: 42rpx 32rpx;
			background: #FFFFFF;
			position: relative;

			.btm-btn {
				position: absolute;
				bottom: 40rpx;
				left: 32rpx;
				width: 686rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #FF9A38 0%, #EB5C20 100%);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.row {
				height: 84rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.name {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
					text-align: left;
					font-style: normal
				}
			}

		}

		.top {
			padding: 18rpx 32rpx;
		}

		.item {
			width: 686rpx;
			height: 250rpx;
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			margin-bottom: 20rpx;

			.top {
				.l {
					.img {
						margin-left: 40rpx;
						width: 98rpx;
						height: 130rpx;
					}

					.name {
						margin-top: 54rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #03102E;
						line-height: 47rpx;
						margin-left: 26rpx;
					}

				}

				.btn {
					margin-top: 52rpx;
					width: 136rpx;
					height: 60rpx;
					background: #7CA4FA;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					margin-right: 40rpx;
				}
			}

			.line {
				margin-bottom: 36rpx;
				margin-top: 22rpx;
				margin-left: 26rpx;
				width: 628rpx;
				height: 2rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				background: #FFFFFF;
			}

			.btm {
				margin-top: 16rpx;
				padding-left: 26rpx;
				padding-right: 32rpx;

				.more {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
				}

				.more1 {
					margin-right: 35rpx;
				}
			}

		}
	}

	.s-flex-wrap {
		flex-wrap: wrap;
	}

	.s-flex-r-s-s {
		display: flex;
	}

	.s-flex-r-s-c {
		display: flex;
		align-items: center;
	}

	.s-flex-r-e-c {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.s-flex-r-c-e {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.s-flex-r-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s-flex-r-b-c {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.s-flex-r-b-s {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.s-flex-r-b-e {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.s-flex-c-s-s {
		display: flex;
		flex-direction: column;
	}

	.s-flex-c-s-c {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.s-flex-c-b-s {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.s-flex-c-c-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.s-flex-c-s-e {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.s-flex-c-e-c {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.flex1 {
		flex: 1;
	}

	.money-box {
		background: #fff;
		height: 250rpx;
		margin-bottom: 20rpx;
		padding-top: 30rpx;

		.time {
			font-size: 28rpx;
			color: #c4c4c4;
		}

		.money {
			color: #e1212b;
			font-size: 60rpx;
			margin-top: 60rpx;

			&::before {
				content: '￥';
				font-size: 46rpx;
			}
		}
	}

	.pay-box {
		.pay-item {
			height: 90rpx;
			padding: 0 30rpx;
			font-size: 26rpx;
			background: #fff;
			width: 750rpx;
			border-bottom: 1rpx solid #eeeeee;

			&:last-child {
				border-bottom: none;
			}

			.pay-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
			}
		}
	}

	.pay-btn {
		width: 690rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin: 100rpx auto 0;
	}
</style>